<template>
  <div class="bgc-default pad-20">
    <div class="flex v-align-c tab-wx-type pad-b-20">
      <div class="mar-r-10 width-192 height-82 bg-color-white border-radius-5 pointer" :class="appType === 10 ? 'active-btn' : ''" @click="changeAppType(10)">
        <div class="flex flex-center height-per-100">
          <img src="https://veekrayimg.joinsun.vip/images/logo-veekray.png" class="width-60 height-60 mar-r-18"/>
          <span>云店小程序</span>
        </div>
      </div>
      <div :class="appType === 11 ? 'active-btn' : ''" @click="changeAppType(11)" class="width-192 height-82 bg-color-white border-radius-5 pointer">
        <div class="flex flex-center height-per-100">
          <img src="https://veekrayimg.joinsun.vip/upload/pifa.png" class="width-60 height-60 mar-r-18"/>
          <span>批发小程序</span>
        </div>
      </div>
      <div v-if="enterpriseConfig.anchorSelectionAuthority == '1'" :class="appType === 13 ? 'active-btn' : ''" @click="changeAppType(13)" class="pointer mar-l-10 width-192 height-82 bg-color-white border-radius-5">
        <div class="flex flex-center height-per-100">
          <img src="https://veekrayimg.joinsun.vip/images/zhubo.png" class="width-60 height-60 mar-r-18"/>
          <span>主播小程序</span>
        </div>
      </div>
    </div>
    <div class="bg-color-white pad-l-20 pad-r-20 pad-b-20" style="margin-bottom: 80px">
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="服务协议" name="0"></el-tab-pane>
          <el-tab-pane label="隐私协议" name="1"></el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <vue-ueditor-wrap ref="editor" style="width: 680px;line-height: 22px;" v-model="content" :config="ueConfig"></vue-ueditor-wrap>
        <!-- <Tinymce ref="editor" style="width: 100%" v-model="content" :showUploadBtn="showUploadBtn" menubar="false" :toolbar="toolbar" /> -->
      </div>
    </div>
    <div class="bottom-bar">
      <div @click="$router.go(-1)">返回</div>
      <div type="primary" @click="saveEnterprise">保存</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.margin-left-39 {
  margin-left: -39px;
}
.height-776{
  height: 776px;
}
.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  height: 80px;
  z-index: 1000;
  .div+.div{
    margin-left: 30px;
  }
}  
.active-btn {
  background: #ECF5FF;
}
.pointer {
  cursor: pointer;
}
.pointer:hover{
  background: #ECF5FF;
}
</style>

<script>
  import { saveAgreement, getEnterpriseAgreement, getByEnterpriseId } from '@/api/user/enterprise'
  import { getToken } from '@/utils/auth'
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: { Tinymce, VueUeditorWrap },
    data() {
      return {
        showUploadBtn: false,
        // 小程序类型
        appType: 10,
        // 系统参数
        enterpriseConfig: {
          anchorSelectionAuthority: 0
        },
        toolbar: ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo'],
        options: [{
          value: 'big-title',
          label: '大标题'
        }, {
          value: 'small-title',
          label: '小标题'
        }, {
          value: '',
          label: '正文'
        }, {
          value: 'other-text',
          label: '其他'
        }],
        textShape: [],
        textShapes: [{
          value: '粗体',
          label: 'font-w'
        }, {
          value: '斜体',
          label: 'font-italic'
        }, {
          value: '下划线',
          label: 'font-under'
        }],
        ueConfig: {
          toolbars: [['source', 'undo', 'fontsize', 'paragraph', '|', 'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'blockquote', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'simpleupload', 'removeformat', 'inserttable', 'deletetable', 'insertrow', 'deletecol', 'insertcol', 'deleterow', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']],
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%'
        },
        content: '',
        form: {
          description: ''
        },
        activeName: '0'
      }
    },
    created() {
      this.initEnterprise()
      this.initEnterpriseConfig()
      this.token = { accessToken: getToken() }
    },
    methods: {
      handleClick() {
        this.initEnterprise()
      },
      initEnterprise() {
        getEnterpriseAgreement(this.getEnterpriseId(), this.activeName, this.appType).then(response => {
          if (response.isError) return
          this.content = ''
          if (response.data) {
            this.content = response.data.content ? response.data.content : ''
            if (response.data.content) {
              this.$refs.editor.setContent(response.data.content)
            } else {
              this.$refs.editor.setContent('')
            }
          }
        })
      },
      // 系统参数
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      saveEnterprise() {
        const date = {
          content: this.content,
          type: this.activeName,
          enterpriseId: this.getEnterpriseId(),
          appType: this.appType
        }
        saveAgreement(date).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.initEnterprise()
        })
      },
      // tab切换
      changeAppType(appType) {
        console.log(3)
        this.appType = appType
        this.initEnterprise()
      }
    }
  }
</script>
